<script setup lang="ts">
import { useData } from "vitepress";

const { type = "primary" } = defineProps<{
  type: "primary" | "warning" | "danger";
}>();

const { isDark } = useData();
</script>

<template>
  <div class="doc-tip" :class="[`doc-tip--${type}`, { 'is-dark': isDark }]">
    <slot />
  </div>
</template>

<style scoped>
.doc-tip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 16px 0;
  padding: 15px 20px;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  border-radius: 5px;
  border: 1px solid transparent;
}

.doc-tip--primary {
  background-color: #edeafa;
  border-color: #a794e5;
  color: #4e29cb;
}
.is-dark.doc-tip--primary {
  background-color: #4e29cb;
  border-color: #4e29cb;
  color: #edeafa;
}

.doc-tip--warning {
  background-color: #fdf6ec;
  border-color: #f3d19e;
  color: #e6a23c;
}
.is-dark.doc-tip--warning {
  background-color: #292218;
  border-color: #7d5b28;
}

.doc-tip--danger {
  background-color: #fef0f0;
  border-color: #fab6b6;
  color: #f56c6c;
}
.is-dark.doc-tip--danger {
  background-color: #2a1d1d;
  border-color: #854040;
}
</style>
